<template>
    <div>
        <el-header height="64px">
        <div class="main-header">
          <div class="header-left">
            <el-breadcrumb>
              <el-breadcrumb-item>{{dashboardStore.currentPath}}</el-breadcrumb-item>
            </el-breadcrumb>
          </div>

          <div class="header-right">
            <el-input
              v-model="searchText"
              placeholder="搜索文件..."
              :prefix-icon="Search"
              class="search-input"
            />

            <div class="view-switch">
              <el-radio-group v-model="dashboardStore.viewMode" size="small">
                <el-radio-button :value="'grid'">
                  <el-icon><Grid /></el-icon>
                </el-radio-button>
                <el-radio-button :value="'list'">
                  <el-icon><List /></el-icon>
                </el-radio-button>
              </el-radio-group>
            </div>

            <el-button
              type="primary"
              class="create-btn"
              @click="createNewSheet"
            >
              <el-icon><Plus /></el-icon>
              新建表格
            </el-button>
            <!-- 消息中心 -->
            <el-badge v-if="dashboardStore.unreadCount>0" :value="dashboardStore.unreadCount" :max="99" class="message-badge">
              <el-button circle @click="dashboardStore.showMessageCenter = true">
                <el-icon><Bell /></el-icon>
              </el-button>
            </el-badge>
            <el-button v-else circle @click="dashboardStore.showMessageCenter = true">
                <el-icon><Bell /></el-icon>
              </el-button>
            <!-- 用户头像 -->
            <el-dropdown trigger="click" @command="handleUserCommand">
              <div class="user-avatar">
                <el-avatar :size="36">
                  {{ userStore.user.username }}
                </el-avatar>
                {{ userStore.user.username }}
                <el-icon class="el-icon--right"><ArrowDown /></el-icon>
              </div>
              <template #dropdown>
                <el-dropdown-menu>
                  <!-- <el-dropdown-item command="profile">
                    <el-icon><User /></el-icon>
                    个人信息
                  </el-dropdown-item>
                  <el-dropdown-item command="avatar">
                    <el-icon><Picture /></el-icon>
                    修��头像
                  </el-dropdown-item> -->
                  <el-dropdown-item divided command="logout">
                    <el-icon><SwitchButton /></el-icon>
                    退出登录
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </div>
      </el-header>
    </div>
</template>

<script setup lang="ts">
import store from '../stores/module/dashboard'
import { useRouter } from "vue-router";
import {createSheet} from '../api/sheet/index.ts'
import {
  Search,
  Plus,
  SwitchButton,
  List,
  Grid,
  ArrowDown,
  Bell,
} from "@element-plus/icons-vue";
import useUserStore from '../stores/module/user';
const userStore = useUserStore()
import {ref} from 'vue'
import { ElMessage } from "element-plus";
const dashboardStore = store()
const router = useRouter();
let searchText = ref('')
const createNewSheet = async () => {
  let result = await createSheet({_id:JSON.parse(localStorage.getItem('user') as string)._id})
  if(result.code == 200){
    router.push(`/sheet/${result.data._id}/${JSON.parse(localStorage.getItem('user') as string)._id}`);
  }else{
    ElMessage.error('表格创建失败,服务器异常')
  }
};
const handleUserCommand = (command: string) => {
  switch (command) {
    case "profile":
      dashboardStore.showProfile = true;
      break;
    case "avatar":
      dashboardStore.showAvatarDialog = true;
      break;
    case "logout":
      handleLogout();
      break;
  }
};
// 退出登录
const handleLogout = () => {
  router.push("/login");
};
</script>

<style scoped>

</style>